<template>
  <div class="recommend">
    <div v-for="(item, index) in recommends" :key="index" class="item">
      <a :href="item.link">
        <img :src="item.image" alt="">
        <div>{{item.title}}</div>
      </a>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'HomeRecommend',
    props: {
      recommends: {
        type: Array,
        default() {
          return []
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .recommend {
    display: flex;
    width: 100%;
    text-align: center;
    font-size: 12px;
    
    // padding(边距): 上 左右 下
    padding: 10px 0 20px;
    
    // 设置每个item样式
    .item {
      flex: 1;
      img {
        width: 88%;
        height: 80%;
        // 图片下方空出10像素
        margin-bottom: 10px;
      }
    }
  }
</style>